<template>
  <a-dropdown :trigger="['click']">
    <SvgIcon v-if="settingsStore.theme === ThemeMode.DARK" size="20px" icon-class="moon" />
    <SvgIcon v-else size="20px" icon-class="sunny" />
    <template #overlay>
      <a-menu>
        <a-menu-item
          v-for="item in themeList"
          :key="item.value"
          @click="handleClick(item.value)"
          :disabled="settingsStore.theme === item.value"
        >
          {{ item.label }}
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'
import { ThemeMode } from '@/enums'
import { useSettingsStore } from '@/store'
const settingsStore = useSettingsStore()

const themeList = [
  { label: '明亮', value: ThemeMode.LIGHT },
  { label: '暗黑', value: ThemeMode.DARK },
]

const handleClick = (theme) => {
  settingsStore.updateTheme(theme)
}
</script>

<style scoped></style>
